<template>
  <div class="home">
    <h1>欢迎使用订餐系统后台管理</h1>
    <p class="subtitle">请选择以下功能开始操作</p>

    <!-- 功能入口 -->
    <div class="feature-cards">
      <div class="feature-card">
        <h2>订单管理</h2>
        <p>查看和处理用户订单，管理订单状态。</p>
        <button class="action-button" @click="goToRoute('/order')">进入</button>
      </div>

      <div class="feature-card">
        <h2>菜品管理</h2>
        <p>添加、编辑或删除菜品，更新菜单内容。</p>
        <button class="action-button" @click="goToRoute('/restaurant/dish')">进入</button>
      </div>

      <div class="feature-card">
        <h2>用户管理</h2>
        <p>查看用户信息，管理用户权限。</p>
        <button class="action-button" @click="goToRoute('/user/users')">进入</button>
      </div>

      <div class="feature-card">
        <h2>餐厅管理</h2>
        <p>查看和编辑餐厅信息，管理餐厅内容。</p>
        <button class="action-button" @click="goToRoute('/restaurant')">进入</button>
      </div>
    </div>

    <!-- 日历展示 -->
    <div class="calendar-container">
      <h2>日历</h2>
      <div class="calendar">
        <div class="calendar-header">
          <button @click="prevMonth">上一月</button>
          <span>{{ currentMonth }}</span>
          <button @click="nextMonth">下一月</button>
        </div>
        <div class="calendar-grid">
          <div
              class="calendar-day"
              v-for="day in days"
              :key="day.date"
              :class="{ 'today': day.isToday }"
          >
            <div class="day-number">{{ day.date }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 路由跳转方法
const goToRoute = (route: string) => {
  router.push(route);
};

// 日历逻辑
const currentDate = ref(new Date());

// 获取当前月份
const currentMonth = computed(() => {
  return currentDate.value.toLocaleString('default', { month: 'long', year: 'numeric' });
});

// 获取当前月份的日期数组
const days = computed(() => {
  const year = currentDate.value.getFullYear();
  const month = currentDate.value.getMonth();
  const firstDay = new Date(year, month, 1);
  const lastDay = new Date(year, month + 1, 0);
  const daysInMonth = lastDay.getDate();
  const daysArray = [];

  // 获取今天的日期
  const today = new Date();
  const isCurrentMonth = today.getFullYear() === year && today.getMonth() === month;

  for (let i = 1; i <= daysInMonth; i++) {
    const date = new Date(year, month, i);
    daysArray.push({
      date: i,
      isToday: isCurrentMonth && i === today.getDate(), // 标记今天
    });
  }

  return daysArray;
});

// 切换月份
const prevMonth = () => {
  currentDate.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() - 1, 1);
};

const nextMonth = () => {
  currentDate.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() + 1, 1);
};
</script>

<style scoped lang="scss">
.home {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;

  h1 {
    text-align: center;
    margin-bottom: 10px;
    font-size: 28px;
    color: #333;
  }

  .subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
  }

  .feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;

    .feature-card {
      padding: 20px;
      background-color: #f5f5f5;
      border-radius: 8px;
      text-align: center;
      transition: transform 0.2s, box-shadow 0.2s;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      }

      h2 {
        font-size: 20px;
        margin-bottom: 10px;
        color: #333;
      }

      p {
        font-size: 14px;
        color: #666;
        margin-bottom: 15px;
      }

      .action-button {
        padding: 8px 16px;
        background-color: #409eff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.2s;

        &:hover {
          background-color: #66b1ff;
        }
      }
    }
  }

  .calendar-container {
    h2 {
      font-size: 22px;
      margin-bottom: 10px;
      color: #333;
    }

    .calendar {
      background-color: #f5f5f5;
      border-radius: 8px;
      padding: 20px;

      .calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        button {
          padding: 8px 16px;
          background-color: #409eff;
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          transition: background-color 0.2s;

          &:hover {
            background-color: #66b1ff;
          }
        }
      }

      .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 10px;

        .calendar-day {
          padding: 10px;
          background-color: white;
          border-radius: 4px;
          min-height: 80px;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;

          .day-number {
            font-weight: bold;
          }

          &.today {
            background-color: #409eff;
            color: white;

            .day-number {
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}
</style>